<template>
    <div class="payselectcon">
        <section class="pnel paytype">
            <h6>支付方式</h6>
            <ul>
                <li v-for="(item,index) in paytypes" @click="choosePayType(index)"
                    :class="[selectedIndex===index?'selected':'']" :key="index">
                    <img :src="item.Icon" alt="">
                    <aside>
                        <span>{{item.Name}}</span>
                        <strong>{{item.SubTitle}}</strong>
                    </aside>
                    <icon name="select" scale="3"></icon>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import {getPayTypesR} from '../service/security';
    export default {
        name: 'Payselect',
        props: ['onchangetype'],
        data() {
            return {
                paytypes: [],
                selectedIndex: 0
            };
        },
        created() {
            this.gettypes();
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            async gettypes(){
                const {data}=await getPayTypesR();
                if(data && data.code === 0) {
                    this.paytypes = data.data;
                    this.paytypes[0].selected = true;
                }
            },
            choosePayType(index){
                this.selectedIndex = index;
            },
            getSelectedType(){
                return this.paytypes[this.selectedIndex];
            },
        }
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    @import "../router/app.less";

    .payselectcon {
        background: #fff;
    }

    .paytype {
        padding: 0 24px;
        h6 {
            height: 86px;
            font-size: @fz30;
            display: block;
            line-height: 120px;
        }
        ul {

            li {
                height: 140px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid @color12;
                &:last-child {
                    border: none;
                }
                img {
                    width: 78px;
                    height: 78px;
                    margin-right: 30px;
                }
                aside {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    span {
                        font-size: @fz36;
                    }
                    strong {
                        font-size: @fz26;
                        color: @color3;
                    }
                }
                &.selected {
                    svg {
                        color: @color22;
                    }
                }
                svg {
                    color: #ddd;
                    width: 45px;
                    height: 45px;
                }
            }
        }
    }

</style>
